<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			.wai{
				display: flex;
				align-items: center;
				border-radius: 100%;
				width: 200px;
				height: 200px;
				margin: auto;
				margin-top: 20%;
				justify-content: center;
				background: -webkit-linear-gradient(#6b28f0, #4d98f0); /* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(#6b28f0, #4d98f0); /* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(#6b28f0, #4d98f0); /* Firefox 3.6 - 15 */
				background: linear-gradient(#6b28f0, #4d98f0); /* 标准的语法 */
			}
			.nei{
				position: relative;
				width: 98%;
				height: 98%;
				background: #ffffff;
				border-radius: 100%;
			}
			
			/* .nei:hover{
					
					animation: myam 5s infinite linear ;
			} */
			
			.neistart{
				   /* transition: all 5s linear ; 
					 transform:  rotate(360deg); */
				animation: myam 5s infinite linear ;
			}
			.neistop{
				 animation-play-state: paused;
			}
			@keyframes myam{
				0%{
					transform:  rotate(0deg); 
				}			
				50%{
					transform:  rotate(180deg); 
				}		
				100%{
					transform:  rotate(360deg); 
				}
			}	
			.tip{
				position: absolute;
				width: 30px;
				height: 30px;
				border-radius: 100%;
				background: #488eea;
				top: -15px;
				left: 0;
				right: 0;
				margin: auto;
				box-shadow: -10px 1px 15px #888888;
				transform-style:preserve-3d;
			}
			.start{
				width: 100px;
				height: 30px;
				color: #ffffff;
				background-color: #488eea;
				border-radius: 5px;
				margin: auto;
				margin-top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;	
			}
			
			.stop{
				width: 100px;
				height: 30px;
				color: #ffffff;
				background-color: #b22b66;
				border-radius: 5px;
				margin: auto;
				margin-top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;	
			}
			
		</style>
	</head>

	<body>
		<div class="wai">
				<div id="zhuan" class="nei">
						<div class="tip">				
						</div>
				</div>
		</div>
		<div id="start" class="start">开始</div>
		<div id="stop" class="stop">结束</div>
		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			document.getElementById("start").addEventListener("click",function(){
				document.getElementById("zhuan").classList.remove('neistop')
				console.log(document.getElementById("zhuan").className = 'nei neistart')
			})
			document.getElementById("stop").addEventListener("click",function(){
				 console.log(document.getElementById("zhuan").classList.add('neistop'))
			})
		</script>
	</body>

</html>
